<template>
  <view>
    <p class="withDrawInfo ">{{'提现佣金：'+commission}}</p>
    <u-subsection :list="list" :current="current" @change="change"></u-subsection>
    <view>
      <div v-for="(item,index) in orderList" :key="index" class="item u-p-30">
        <h4> {{'订单号:' + item.ordernumber}}</h4>
        <u-tag :text="getOrderStatus(item).name"  :type="['warning','success','info'][getOrderStatus(item).status]"  size="mini" class="u-m-r-15 u-m-b-10 u-m-t-10" />
        <p class="u-font-xs">{{'下单人:'+item.user_name}}({{['一级','二级','三级'][item.level-1]}})   <span class="u-m-l-15">{{'手机号:'+item.phone}}</span> </p>
        <p class="u-font-xs u-m-t5 u-m-b-5">{{'订单金额:' + item.total_price}}</p>
        <p class="u-font-xs"> {{'下单时间:' + item.addtime}}</p>
        <div class="right">
          <p class="commission">  {{item.commission}}</p>
          <p class="u-font-xs" :style="{color:$u.color['tipsColor']}">佣金收益</p>
        </div>
      </div>
    </view>
    <u-empty class="u-m-t-60" text="暂无数据" icon-size="240" mode="data" v-if="orderList.length===0"></u-empty>
  </view>
</template>

<script>
export default {
  data(){
    return{
      list: [
        {
          name: '全部'
        },
        {
          name: '待付款'
        },
        {
          name: '已付款'
        },
        {
          name: '完成'
        }
      ],
      current: 0,
      commission:"0.00",
      orderList:[]
    }
  },
  onLoad(){
    this.getCommissionList()
  },
  
  methods:{
    getOrderStatus(item){
      if(item.status=0,item.fh_status=0,item.order_status=0){
        return {name:'待付款',status:0}
      }else if(item.status=1,item.fh_status=1,item.order_status=1){
        return {name:'已完成',status:1}
      }else if(item.status=1,item.order_status=0){
        return {name:'已付款',status:0}
      }else{
        console.log()
      }
      
    },
    async change(e){
      await  (this.current = e)
      this.getCommissionList()
    },
    getCommissionList(){
      const data = {
        status: this.current+1
      }
      this.$http.getCommissionList(data).then(res=>{
        this.commission = res.data.commission
        this.orderList = res.data.order_list
      })
    }
  }
}
</script>

<style lang="scss" scoped >
@import "uview-ui/index.scss";
.withDrawInfo{
  background-color: $u-type-error;
  color: #fff;
  padding: 20upx;
  font-weight: 600;
}
.item{
  background-color: #fff;
  margin-bottom: 4upx;
  position: relative;
  .right{
    position: absolute;
    text-align: center;
    right: 20upx;
    top: 50%;
    transform: translateY(-50%);
    .commission{
      font-size: 40upx;
      font-weight: 600;
      
    }
    
  }
}
</style>
